<template>
  <div class="loginContainer">
    <div class="topContainer">
      <!-- 跳到首页 -->
      <a href="/" class="home">
        <van-icon name="wap-home-o" size="34" color="#333" />
      </a>
      <a href="/" class="logo">网易严选</a>
      <!-- 跳转到搜索页 -->
      <a href="/search" class="search">
        <van-icon name="search" size="34" color="#333" />
      </a>
      <!-- 跳转到购物车 -->
      <a href="/shopCar" class="shopCar">
        <van-icon name="shopping-cart-o" size="34" color="#333" />
      </a>
    </div>
    <div class="centerContainer">
      <div class="wytext">
        <img src="../../../assets/logo.png" alt="" />
      </div>
      <div class="emailLogin">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="loginForm.phone"
              label="手机号"
              placeholder="请输入手机号"
              name="pattern"
              :rules="[{ pattern, message: '手机格式不正确' }]"
            />
            <van-field
              v-model="loginForm.password"
              label="密码"
              placeholder="请输入注册密码"
              type="password"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
        </van-form>
        <div class="regis">
          <span><a href="#javascript" @click="toRegister">注册账号</a></span>
          <span class="forget"><a href="#javascript">忘记密码</a></span>
        </div>
        <van-button type="danger" size="large" class="login" @click="loginHandler">登录</van-button>
      </div>

      <div class="choose">选择其他登录方式<span>></span></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
// 引入仓库
import { useUserInfoStore } from "@/stores/userInfo";
const router = useRouter();
const userInfoStore = useUserInfoStore()
// 跳转到注册页面
const toRegister = () => {
  router.push({ name: "Register" });
};
// 手机号校验
const pattern = /^1[3-9][0-9]{9}$/;
const loginForm = ref({
  phone:'',
  password:''
})
//存储用户曾经想去而没有去成的地方
const redirect = ref("");
// 登录
const loginHandler = async() => {
  // 解构手机号和密码
  const {phone,password} = loginForm.value
  try {
    // 调用仓库中的login
    await userInfoStore.login(phone,password)
    //如果登录成功跳转到首页|跳转到曾经想去而没有去成的地方
    router.push({path:redirect.value || '/'})
  } catch (error) {
    return Promise.reject(error)
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.loginContainer {
  height: 100%;
}
.topContainer {
  width: 100%;
  height: 47px;
  background-color: #fafafa;
  line-height: 47px;
  .topCenter {
    width: 400px;
    height: 47px;
    line-height: 55px;
  }
  .home {
    margin-left: 10px;
  }
  .logo {
    font-size: 20px;
    color: #333;
    margin-left: 100px;
    margin-right: 55px;
    font-weight: 700;
  }
  .search {
    margin-right: 25px;
  }
}
.centerContainer {
  background: #f2f5f4;
  height: 100%;
  .wytext {
    text-align: center;
    padding-top: 1.6rem;
    img {
      width: 3.6rem;
      height: 1.3rem;
    }
  }
  .emailLogin {
    margin: 1.5rem 0.6rem;
    input {
      border: none;
      background: #f2f5f4;
      border-bottom: 1px solid #ccc;
      height: 1.25rem;
      font-size: 0.4rem;
      width: 9rem;
    }
  }
  .regis {
    margin: 0.38rem 0;
    font-size: 0.35rem;

    .forget {
      float: right;
    }
  }

  .choose {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.35rem;
  }
}
</style>
